
<template>
	<div>
		<div class="header" :style="message">
			<div class="layout-ceiling" style="display: flex;justify-content: space-between;">
				<div style="margin-left: 26px;" v-if="!name">{{ nameT }}</div>
				<div style="margin-left: 26px;" v-else>{{ name }}</div>
				<div class="back_wrap" style="margin-right: 80px;">
					<div style="font-size: 14px;margin-left: 25px;">
						hello
						<b style="margin-left:5px;color: #F4516C">{{ userInfoList.userName }}</b>
					</div>
					<div class="headerImg" @click="routeAside">
						<img src="../assets/img/head_portrait.png" alt="" v-if="!userInfoList.userImg" style="width: 30px;height: 30px;margin-left:10px;" />
						<img class="header_img" :src="userInfoList.userImg" alt="" v-if="userInfoList.userImg" style="width: 30px;height: 30px;margin-left:10px;" />
					</div>
					<div style="margin-left: 30px;cursor: pointer; font-size: 14px;" @click="loginout">
						<i class="el-icon-s-unfold" style="font-size: 22px;color: #918BD5;"></i>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Cookies from 'js-cookie';
import { userInfo } from '../server/index.js';
export default {
	name: '',
	data() {
		return {
			username: '',
			nameT: '',
			userWord: '个人中心',
			agentWord: ''
		};
	},
	props: {
		message: String,
		name: String,
		userInfoList: Object
	},
	computed: {
		TopMenu() {
			return this.$store.state.TopMenu;
		},
		activeIndex() {
			return this.$store.state.Active;
		}
	},
	mounted() {
		const _this = this;
		// if (_this.$route.query.name) {
		// 	_this.name = _this.$route.query.name;
		// 	console.log(_this.agentWord);
		// }
		_this.userData();
	},
	watch: {
		$route(to, from) {
			if(to.path == '/agentCenter/agentDetail'){
				this.name = this.$route.query.name
			}else if(to.path == '/agentCenter/agentDetailList'){
				this.name = this.$route.query.name
			}
		}
	},
	methods: {
		// 点击跳转至container
		routeAside() {
			const _this = this;
			_this.$emit('func', this.userWord);
			_this.$router.push({ path: '/sales' });
		},
		loginout() {
			const _this = this;
			_this
				.$confirm('此操作将退出登录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
				.then(() => {
					Cookies.remove('Token');
					_this.$message({
						type: 'success',
						message: '退出成功!'
					});
					_this.$router.push({
						path: '/login'
					});
				})
				.catch(() => {
					_this.$message({
						type: 'info',
						message: '已取消退出'
					});
				});
		},
		userData() {
			//''
			const _this = this;
			_this.http.request({
				url: userInfo,
				data: '',
				success: function(res) {
					_this.userInfoData = res;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		}
	}
};
</script>
<style>
.back_wrap {
	margin: 0px;
	padding: 0px 45px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}
.headerImg {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.header_img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	margin-left: 15px;
}

.layout-ceiling {
	background: #fff;
	text-align: left;
	overflow: hidden;
	height: 56px;
	line-height: 56px;
}

.layout-ceiling p {
	color: #3d3b56;
}

.layout-ceiling-main {
	float: right;
	margin-right: 15px;
}

.layout-ceiling-main span {
	font-size: 14px;
	cursor: pointer;
	color: #9ba7b5;
}

.layout-ceiling-main span:hover {
	color: #ffffff;
}
</style>
